<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../ztree/js/jquery-1.4.4.min.js"></script>
    <link rel="stylesheet" href="../../ztree/css/metroStyle/metroStyle.css">
    <script src="../../ztree/js/jquery.ztree.all.js"></script>

    <link rel="stylesheet" href="../personnel/css/bootstrap.min.css">
    <script src="../personnel/js/popper.min.js"></script>
    <script src="../personnel/js/bootstrap.min.js"></script>
    <script src="../js/vue.js"></script>

</head>
<body>
<div class="box" id="box">
    <div class="container-fluid mt-3">
        <div class="row height1">
            <div class="col p-3 bg-dark text-white"><h5>菜单管理</h5></div>
        </div>
        <div class="row">
            <div class="col mt-3 text-white">
                <div class="container mt-0 position-relative">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>角色id</th>
                            <th>角色名称</th>
                            <th>角色介绍</th>
                            <th>操作权限</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="r in Role" class="lh-48">
                            <td>{{r.roleId}}</td>
                            <td>{{r.roleName}}</td>
                            <td>{{r.roleDesc}}</td>
                            <td>
                                <button @click="role(r.roleId)" type="button" class="btn btn-outline-info btn-sm" data-bs-toggle="modal" data-bs-target="#myModal">修改</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- 修改 -->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- 修改头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">修改</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <!-- 修改内容 -->
                <div class="modal-body">
                        <div>
                            <ul id="treeDemo" class="ztree"></ul>
                        </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" @click="aTree()">提交</button>
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    const RoleVue = {
        data(){
            return{
                Role:selRole(),
                Menu:{},
                ids: [],
                roleId:null
            }
        },
        methods:{
            role:function (id){
                zTreeObj.checkAllNodes(false)
                this.ids.length = 0
                this.Menu = selMenu(id)
                this.roleId = id
                for (let i = 0; i <this.Menu.length ; i++) {
                    var node = zTreeObj.getNodeByParam("nodeId", this.Menu[i].nodeId);
                    zTreeObj.checkNode(node, true, false);
                }
                console.log(this.ids)
            },
            aTree:function (){
                let ids = []
                for (let i = 0; i < zTreeObj.getCheckedNodes(true).length; i++) {
                    ids[i] =  zTreeObj.getCheckedNodes(true)[i].nodeId
                }
                console.log(ids)
                $.ajax({
                    type:"post",
                    url: "../../MenuServlet?flag=addRoleRight",
                    dataType:"json",
                    data:{"NodeId":JSON.stringify(ids),"roleId":this.roleId},
                    async:false,
                    success:function (res){
                        if (res == 1){
                            alert("修改成功")
                            location.reload()
                        }
                    }
                })
            }
        }
    }
    const app = Vue.createApp(RoleVue).mount('#box');

    /**
     * 角色
     * @returns {*}
     */
    function selRole() {
        let list;
        $.ajax({
            type: "post",
            url: "../../RoleServlet?flag=selRole",
            dataType: "json",
            async: false,
            success: function (res) {
                list = res;
            }
        })
        return list;
    }

    /**
     * 角色的菜单
     * @param id
     * @returns {*}
     */
    function selMenu(id){
        let list;
        $.ajax({
            type:"post",
            url: "../../MenuServlet?flag=selRoleRight",
            dataType:"json",
            data:{"roleId":id},
            async:false,
            success:function (json){
                list = json
            }
        })
        return list;
    }

    /**
     * 全部菜单
     * @returns {*}
     */
    function allMenu(){
        let list;
        $.ajax({
            type:"get",
            url:"../../MenuServlet?flag=selAll",
            dataType:"json",
            async:false,
            success:function(res){
                list = res
            }
        });
        return list;
    }
</script>
<script>
    var settingss = {
        data: {
            simpleData: {
                enable: true,  //true 、 false 分别表示 使用 、 不使用 简单数据模式
                idKey: "nodeId",   //节点数据中保存唯一标识的属性名称
                pIdKey: "parentNodeId",    //节点数据中保存其父节点唯一标识的属性名称
                rootPId: -1  //用于修正根节点父节点数据，即 pIdKey 指定的属性值
            },
            key: {
                name: "displayName"  //zTree 节点数据保存节点名称的属性名称  默认值："name"
            }
        },
        check:{
            enable:true,  //true 、 false 分别表示 显示 、不显示 复选框或单选框
            nocheckInherit:true   //当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true
        }
    };


    $(document).ready(function(){
        $.ajax({
            type:"get",
            url:"../../MenuServlet?flag=selAll",
            dataType:"json",
            success:function(res){
                zTreeObj = $.fn.zTree.init($("#treeDemo"), settingss, res); //初始化树
                zTreeObj.expandAll(true);    //true 节点全部展开、false节点收缩
            }
        });
    });
</script>
</html>